<template>
  <div class="create-channel-test">
    <div class="imgCompontant">
      <cutImage :width="options.width" :height="options.height" @change="cutEnd" ref="cutimg"></cutImage>
    </div>


    <div class="imgList">
      <img :src="image" alt="" v-for="image in imgUrlList2" @click="cutMyImg(image)">
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import cutImage from '../components/cutOne.vue'
  //vue父组件必须页面加载完再给子组件传值，否则传的值为空
  export default {
    data() {
      return {
        options: {
          width: 200,
          height: 200
        },
        imgUrl: '',
        imgList: [{
          "file": "yuanqiwulongnai",
          "name": "0000.png",
          "src": "http://s.swao.cn/FhEDdjcXHa7CPkGebgjiDOfWwc-0"
        }, {
          "file": "yuanqiwulongnai",
          "name": "1111.png",
          "src": "http://s.swao.cn/Fmu-FycQzfUl0H1j9TgOPsDfNFdB"
        }, {
          "file": "yuanqiwulongnai",
          "name": "1beij.png",
          "src": "http://s.swao.cn/FtZtjBnTt1OEmO7OLUq3PauZsSnJ"
        }, {
          "file": "yuanqiwulongnai",
          "name": "1douzi1.png",
          "src": "http://s.swao.cn/FoCya145g24jVY8bB82K0hkwKfLd"
        }, {
          "file": "yuanqiwulongnai",
          "name": "1douzi2.png",
          "src": "http://s.swao.cn/Fitpdb3lxu0dwJivNmCbDtLfXwww"
        }, {
          "file": "yuanqiwulongnai",
          "name": "1douzi3.png",
          "src": "http://s.swao.cn/FhKpFQ7BFmkKwIr4jDT57twuFEOu"
        }, {
          "file": "yuanqiwulongnai",
          "name": "1douzi4.png",
          "src": "http://s.swao.cn/FgUmPTFQXwYcEBXAj4xqBS9sNPDQ"
        }, {
          "file": "yuanqiwulongnai",
          "name": "1laogo.png",
          "src": "http://s.swao.cn/Fhak43ZDNwwt6FpfntkCFg0pgR4K"
        }, {
          "file": "yuanqiwulongnai",
          "name": "1naicha.png",
          "src": "http://s.swao.cn/FkRC3h0TQ4Q3N0FcswTBggMNHvfd"
        }, {
          "file": "yuanqiwulongnai",
          "name": "1wenzi.png",
          "src": "http://s.swao.cn/Ftc6GhUzKqOdsffHxvoO0EL7Oitv"
        }, {
          "file": "yuanqiwulongnai",
          "name": "1zhaop1.png",
          "src": "http://s.swao.cn/FgouqjubgVd992Ni3VzerXngThu_"
        }, {
          "file": "yuanqiwulongnai",
          "name": "1zhaop4.png",
          "src": "http://s.swao.cn/Fr-FuNbdI8FOcfFtbyQ5QRRYUeyE"
        }],
        imgUrlList2: []
      }
    },
    methods: {

      cutEnd: function (data) {
        console.log('cut_end', data);
      },
      cutMyImg: function (image) {
        this.imgUrl = image;
        console.log("ref:"+this.$refs.cutimg);
        this.$refs.cutimg.uploadFile(image);
      },
      getNetImgList: function () {
        let _this=this;
        $.ajax({
          type: 'POST',
          url: 'http://ljapi.swao.cn/resource/search',
          data: JSON.stringify({"index": 0, "size": 30, "type": "image"}),
          dataType: 'json',
          contentType: 'application/json',
          headers: {
            token: '128aa6e1627f47cba3e604ba79fd24b4'
          },
          success: function (res) {
            console.log(JSON.stringify(res.data.content));
            _this.imgUrlList2 = [];
            let arrImgList = res.data.content;
            let n = 0;
            arrImgList.forEach(img => {
              n++;
              console.log(img.data);
              if (n < 20) {
                _this.imgUrlList2.push(img.data);
              }

            });
            console.log(_this.imgUrlList2);
          }
        });
      },

      getNetTextList: function () {
        let _this=this;
        $.ajax({
          type: 'POST',
          url: 'http://ljapi.swao.cn/resource/search',
          data: JSON.stringify({"index": 0, "size": 30, "type": "text"}),
          dataType: 'json',
          contentType: 'application/json',
          headers: {
            token: '128aa6e1627f47cba3e604ba79fd24b4'
          },
          success: function (res) {
            console.log(JSON.stringify(res.data.content));
          }
        });
      },

    },
    components: {
      cutImage: cutImage
    },
    mounted() {
      // this.$nextTick(function () {
      //   this.getNetImgList();
      //   this.getNetTextList();
      // });
      this.getNetImgList();
      this.getNetTextList();
    }
  }
</script>

<style lang="scss">
  .create-channel-test {
    position: relative;
    width: 100%;
    height: 100%;
    .imgCompontant {
      width: 100%;
      height: 100px;
    }
    .imgList {
      width: 100%;
      height: auto;
      margin-top: 100px;
      img {
        width: 100px;
        height: 50px;
        float: left;
      }
    }
  }
</style>
